
@keyframes svgLoading {
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

body{
    padding-bottom:80px;
}
.detail{
    padding:30px;
    .viewBox{
        border-radius:10px;
        overflow: hidden;
    
    >.title{
        width:100%;
        height:85px;
        background:@van-gray0;
        line-height:85px;
        font-size:28px;
        padding-left:30px;
        letter-spacing:2px;
        // font-weight:bold;
    }
    >.content{
        background-color:#fff;
        padding:0px 30px;
        .sub_title{
            font-size:30px;
            padding:20px 0px;
            font-weight:normal;
        
        }
        ul{
            li{
                display: flex;
                padding:20px 0px;
                font-size:24px;
                color:@van-gray3;
                .desc{
                    margin-left:60px;
                }
            }
        }
    }
    }
}
.footerBar::after{
    content:"";
    display:block;
    width:200%;
    height:200%;
    position: absolute;
    border-top:solid 1px #ccc;
    transform:scale(0.5);
    left:-50%;
    top:-50%;
    pointer-events:none;
}
// IPhoneXBottomHeight/index.iso.scss
@media only screen and (min-device-height: 812px) {
    @supports (-webkit-overflow-scrolling: touch) {
       .iphonexBottomHeight {
         height:calc(~"constant(safe-area-inset-bottom) - 30px");
         height:calc(~"env(safe-area-inset-bottom) - 30px");
       }
    }
  }
.footerBar{
   
    position: fixed;
    bottom:0px;
    width:100%;
    z-index: 99;
    box-shadow:0px 0px 10px #eee;
    background-color:#fff;
    .actions{
        display: flex;
        .action{
            
            flex:1;
            justify-content: center;
            text-align: center;
            background-color:#fff;
            height:80px;
            font-size:28px;
            line-height:80px;
            
        }
        .action:active{
            background-color:#eee;
        }
        .action.active{
            color:@van-blue1
            
        }
    }
   
}


.stepBox{
    width:100%;
    padding:30px 0px;
    .stepItem::after{
        content:"";
        display:block;
        height:100%;
        position:absolute;
        width:0px;
        left:6px;
        border-left:dashed 2px @van-gray1;
        z-index:0;
    }
    .stepItem:last-child{
        .tagBox{
            background-color:#def3ff;

        }
        &::after{
            display:none;
        }
        
    }
    .stepItem.end{
        .tagBox{
            background-color:@van-blue1;

        }
        &::after{
            display:none;
        }
    }
    .stepItem{
        // padding:20px 0px;
        display: flex;
        flex-direction: row;
        min-height:100px;
        width:100%;
        position: relative;
        padding-bottom: 90px;
        .tagBox{
            width:8Px;
            height:8Px;
            border-radius:50%;
            margin-right:20px;
            flex-shrink: 0;
            background-color:@van-blue1;
            position: relative;
            top:8px;
            z-index:1;
          
            box-shadow:0 0 0 8px#def3ff
            
        }
       
        >.content{
            width:100%;
            position: relative;
            font-size:18px;
            
            >.title{
                font-size:28px;
            }
            >.desc{
                min-height:60px;
                padding-top:33px;
                font-size:20px;
                color:@van-gray3
            }
            .status{
                position:absolute;
                right:0px;
                top:0px;
                font-size:28px;
                display: flex;
                svg.reload{
                    margin-right:10px;
                    &.loading{
                        animation: svgLoading 0.5s linear infinite;
                    }
                }
            }
            .status.create{
                color:@van-blue1
            }
            .status.step{
                color:@van-war
            }
            .status.active{
                color:@van-green
            }
            .status.stop{
                color:@van-gray
            }
        }

    }
}